<template lang="pug">
  div.topbar-setting
    div.topbar-setting-button.fs-16(
      @click="handleOpen",
      v-Clickoutside="handleClose"
    )
      span.topbar-setting-username.d-lg-inline {{realName}}
      span.topbar-setting-img.thumbnail-wrapper.d32.circular.inline
        img(src="./setting-account.jpg",width="32",height="32")
    .dropdown-menu.dropdown-menu-right.profile-dropdown(:class="{'d-block':isActive}")
      a.dropdown-item.clearfix(@click="linkTo('/system/#/setting/changePassword')")
        i.iconfont.icon-lock
        |  修改密码
      a.dropdown-item.clearfix.bg-master-lighter(@click="logout")
        span.float-left 退出
        span.float-right
          i.iconfont.icon-power-off
</template>

<script>
import Clickoutside from '@/utils/clickoutside'
import { logout } from '@/utils/auth'

export default {
  name: 'Setting',
  directives: { Clickoutside },
  props: {
    realName: String
  },
  data () {
    return {
      isActive: false
    }
  },
  methods: {
    handleOpen () {
      this.isActive = !this.isActive
    },
    handleClose () {
      this.isActive = false
    },
    linkTo (url) {
      window.location.href = url
    },
    logout () {
      logout(() => {
        this.$message({
          message: '退出成功',
          showClose: true,
          type: 'success'
        })
        this.$router.push('/login')
      })
    }
  }
}
</script>

<style lang="sass" scoped>
.topbar-setting
  position: relative
  .profile-dropdown
    left: auto
    right: 10px
    width: 150px
    > a > i
      margin-right: 12px
    .dropdown-item
      cursor: pointer
      &.active, &:active
        background: #eee
.topbar-setting-button
  cursor: pointer
  text-align: center
  .topbar-setting-username
    display: none
    line-height: 60px
  .topbar-setting-img
    margin: 14px
    float: right
</style>
